<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>
    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="工单号" v-model="orderID"></LInput>
      <LDateTimeSelect2 label="报修时间" style="margin-left: 16px" :value="orderTime" @time-event="getNewTime"></LDateTimeSelect2>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
      <LButton label="＋报修" style="margin-left: 16px" @click="repairDialog = true"></LButton>
    </section>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="待受理">
        <el-table :data="tableData1" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="报修单位" />
          <el-table-column label="报修人" />
          <el-table-column label="联系电话" />
          <el-table-column label="维修单位" />
          <el-table-column label="超时" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待接单">
        <el-table :data="tableData2" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="报修电话" />
          <el-table-column label="报修单位" />
          <el-table-column label="报修人" />
          <el-table-column label="报修时间" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修单位" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="执行中">
        <el-table :data="tableData3" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="接单时间" />
          <el-table-column label="报修单位" />
          <el-table-column label="执行人" />
          <el-table-column label="联系电话" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="等待材料">
        <el-table :data="tableData4" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="接单时间" />
          <el-table-column label="维修单位" />
          <el-table-column label="等待原因" />
          <el-table-column label="预计完成时间" />
          <el-table-column label="联系电话" />
          <el-table-column label="审批状态" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待关单">
        <el-table :data="tableData5" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="接单时间" />
          <el-table-column label="完工申请时间" />
          <el-table-column label="维修单位" />
          <el-table-column label="执行人" />
          <el-table-column label="联系电话" />
          <el-table-column label="验收人" />
          <el-table-column label="自动关单" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已关单">
        <el-table :data="tableData6" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="接单时间" />
          <el-table-column label="完工申请时间" />
          <el-table-column label="关单时间" />
          <el-table-column label="维修单位" />
          <el-table-column label="执行人" />
          <el-table-column label="联系电话" />
          <el-table-column label="验收人" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="可协助">
        <el-table :data="tableData7" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="报修电话" />
          <el-table-column label="报修单位" />
          <el-table-column label="报修人" />
          <el-table-column label="报修时间" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 弹出框：报修 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="报修" width="40%" @close="repairDialogClose">
        <el-form label-width="80px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules" size="mini">
          <div class="row">
            <div class="row-title">报修人信息</div>
            <div class="row-1">
              <el-form-item label="报修电话" prop="tel">
                <el-input v-model="repairForm.tel"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog1 = true" />
              </el-form-item>
              <el-form-item label="报修单位" prop="bunit">
                <el-input v-model="repairForm.bunit"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog4 = true" />
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="报修人" prop="name">
                <el-input v-model="repairForm.name"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog5 = true" />
              </el-form-item>
            </div>
          </div>
          <div class="row">
            <div class="row-title">设备选择</div>
            <div class="row-1">
              <el-form-item label="设备类型" prop="type">
                <el-select v-model="repairForm.type" style="width:90%" filterable>
                  <el-option label="公共设备1" value="1"></el-option>
                  <el-option label="公共设备2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设备编码" prop="no">
                <el-input v-model="repairForm.no"></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="设备名称" prop="dname">
                <el-input v-model="repairForm.dname"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog6 = true" />
              </el-form-item>
              <el-form-item label="安装地址" prop="bunit">
                <el-input v-model="repairForm.place">
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="row">
            <div class="row-title">故障信息</div>
            <div class="row-1">
              <el-form-item label="任务级别" prop="level">
                <el-select v-model="repairForm.level" style="width:90%" filterable>
                  <el-option label="任务1" value="1"></el-option>
                  <el-option label="任务2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="维修事项" prop="pro">
                <el-input v-model="repairForm.pro"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog2 = true" />
              </el-form-item>
            </div>
            <div style="padding: 0 2vw 0 0">
              <el-form-item label="故障位置" prop="position">
                <el-input v-model="repairForm.position"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog3 = true" />
              </el-form-item>
              <el-form-item label="故障描述" prop="describe">
                <el-input v-model="repairForm.describe" type="textarea"></el-input>
              </el-form-item>
            </div>
          </div>
          <div style="margin-top:1.2vh;height:100px;overflow:auto">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="6" :on-exceed="handleExceed" :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <span style="font-size:8px"> (最多上传6个文件)</span>
            </el-upload>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框1：选择电话 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog1" title="选择电话" width="35%" @close="repairDialog1Close(row)" :rules="repairForm1Rules">
        <el-form ref="repairForm1Ref" :model="repairForm1" label-width="50px" size="small">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm1.search"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="subPopTable1" style="width: 100%" border ref="subPopTable1Ref" highlight-current-row @current-change="currentSelect1">
          <el-table-column prop="tel" label="电话" />
          <el-table-column prop="place" label="地点名称" />
          <el-table-column prop="describe" label="描述" />
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="200000">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog1SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog1 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框2：选择维修事项 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog2" title="选择维修事项" width="35%" @close="repairDialog2Close">
        <el-form ref="repairForm2Ref" :model="repairForm2" label-width="75px" size="small" style="display: flex">
          <el-form-item label="搜索" prop="search" style="width: 40%">
            <el-input v-model="repairForm2.search"></el-input>
          </el-form-item>
          <el-form-item label="项目类别" prop="sort" style="width: 40%">
            <el-select v-model="repairForm2.sort">
              <el-option>全部</el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" style="height: 10px; margin-left: 15px">查询</el-button>
        </el-form>
        <el-table ref="subPopTable2Ref" :data="subPopTable2" highlight-current-row @current-change="currentSelect2" style="width: 100%" border>
          <el-table-column prop="proName" label="维修项目名称">
          </el-table-column>
          <el-table-column prop="proSoreName" label="项目类别名称">
          </el-table-column>
          <el-table-column prop="mark" label="备注"> </el-table-column>
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="22">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog2SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框3：选择故障位置 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog3" title="选择故障位置" width="35%" @close="repairDialog3Close">
        <el-form ref="repairForm3Ref" :model="repairForm3" label-width="50px" size="small" style="display: flex">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm3.search"></el-input>
          </el-form-item>
          <el-button type="primary" size="small" style="height: 10px; margin-left: 15px">查询</el-button>
        </el-form>
        <el-table ref="subPopTable3Ref" :data="subPopTable3" highlight-current-row @current-change="currentSelect3" style="width: 100%" border>
          <el-table-column prop="proName" label="地点名称"> </el-table-column>
          <el-table-column prop="proSoreName" label="部门名称">
          </el-table-column>
          <el-table-column prop="mark" label="楼栋名称"> </el-table-column>
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="22">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog3SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog3 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框4：选择报修单位 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog4" title="选择报修单位" width="35%" @close="repairDialog4Close(row)" :rules="repairForm4Rules">
        <el-form ref="repairForm4Ref" :model="repairForm4" label-width="50px" size="small">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm4.search"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="subPopTable4" style="width: 100%" border ref="subPopTable4Ref" highlight-current-row @current-change="currentSelect4">
          <el-table-column prop="tel" label="部门编号" />
          <el-table-column prop="place" label="部门名称" />
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="200">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog4SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog4 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框5：选择报修人 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog5" title="选择报修人" width="35%" @close="repairDialog5Close(row)" :rules="repairForm5Rules">
        <el-form ref="repairForm5Ref" :model="repairForm5" label-width="50px" size="small">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm5.search"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="subPopTable5" style="width: 100%" border ref="subPopTable5Ref" highlight-current-row @current-change="currentSelect5">
          <el-table-column prop="a" label="工号" />
          <el-table-column prop="b" label="用户名称" />
          <el-table-column prop="c" label="职位" />
          <el-table-column prop="d" label="部门" />
          <el-table-column prop="e" label="电话" />
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="200">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog5SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog5 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框6：选择设备 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog6" title="选择报修人" width="35%" @close="repairDialog6Close(row)" :rules="repairForm6Rules">
        <el-form ref="repairForm6Ref" :model="repairForm6" label-width="50px" size="small">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm6.search"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="subPopTable6" style="width: 100%" border ref="subPopTable6Ref" highlight-current-row @current-change="currentSelect6">
          <el-table-column prop="a" label="设备名称" />
          <el-table-column prop="b" label="设备编码" />
          <el-table-column prop="c" label="设备类型" />
          <el-table-column prop="d" label="安装地址" />
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="200">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog6SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog6 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LButton from "../../../components/LButton.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
  },
  data() {
    return {
      title: "运维管理—工单受理管理",
      orderID: "",
      orderTime: [],
      repairDialog: false,
      repairForm: {
        tel: "",
        bunit: "",
        name: "",
        type: "",
        no: "",
        dame: "",
        place: "",
        level: "",
        pro: "",
        describe: "",
      },
      //===========================================================================
      repairDialog1: false,
      repairForm1: {
        search: "",
      },
      subPopTable1: [
        {
          tel: "13312345670",
          place: "1#楼",
          describe: "维修XXXXX描述",
        },
        {
          tel: "13312345671",
          place: "1#楼2",
          describe: "维修XXXXX描述2",
        },
        {
          tel: "13312345672",
          place: "1#楼3",
          describe: "维修XXXXX描述3",
        },
        {
          tel: "13312345670",
          place: "1#楼",
          describe: "维修XXXXX描述",
        },
        {
          tel: "13312345671",
          place: "1#楼2",
          describe: "维修XXXXX描述2",
        },
        {
          tel: "13312345672",
          place: "1#楼3",
          describe: "维修XXXXX描述3",
        },
        {
          tel: "13312345670",
          place: "1#楼",
          describe: "维修XXXXX描述",
        },
        {
          tel: "13312345671",
          place: "1#楼2",
          describe: "维修XXXXX描述2",
        },
        {
          tel: "13312345672",
          place: "1#楼3",
          describe: "维修XXXXX描述3",
        },
        {
          tel: "13312345672",
          place: "1#楼3",
          describe: "维修XXXXX描述3",
        },
      ],
      subPopTable1Select: null, //声明一个变量保存"选择电话"的值
      repairDialog2: false,
      repairForm2: {
        search: "",
        sort: "",
      },
      subPopTable2: [
        {
          proName: "水电",
          proSoreName: "水电",
          mark: "水电",
        },
        {
          proName: "空调",
          proSoreName: "空调",
          mark: "空调",
        },
        {
          proName: "设备维修",
          proSoreName: "设备维修",
          mark: "其他设备维修",
        },
      ],
      subPopTable2Select: null, //声明一个变量保存"选择维修项目"的值
      repairDialog3: false,
      repairForm3: {
        search: "",
      },
      subPopTable3: [
        {
          proName: "水水水",
          proSoreName: "保洁部",
          mark: "餐厅楼",
        },
      ],
      subPopTable3Select: null, //声明一个变量保存"选择故障位置"的值
      repairDialog4: false,
      repairForm4: {
        search: "",
      },
      subPopTable4: [
        {
          tel: "00",
          place: "机关事务局",
        },
        {
          tel: "01",
          place: "工程部",
        },
      ],
      subPopTable4Select: null, //声明一个变量保存"选择报修单位"的值
      repairDialog5: false,
      repairForm5: {
        search: "",
      },
      subPopTable5: [
        {
          a: "00",
          b: "张勇",
          c: "机关事务局领导",
          d: "工程部",
          e: "12345678978",
        },
        {
          a: "01",
          b: "高松",
          c: "项目经理",
          d: "物业公司",
          e: "13342589632",
        },
      ],
      subPopTable5Select: null, //声明一个变量保存"报修人"的值
      repairDialog6: false,
      repairForm6: {
        search: "",
      },
      subPopTable6: [
        {
          a: "大机房1",
          b: "01",
          c: "公共设备",
          d: "主楼地下室1",
        },
        {
          a: "大机房2",
          b: "02",
          c: "公共设备",
          d: "主楼地下室2",
        },
      ],
      subPopTable6Select: null, //声明一个变量保存"选择设备"的值
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //获取搜索栏“报修时间”
    getNewTime(m) {
      this.orderTime = m;
      // console.log("子组件传递的月份1", this.orderTime);
    },
    //清空筛选条件
    clearSelected() {
      console.log("点击清空按钮");
      this.orderID = "";
      this.orderTime = [];
    },
    //清空"维修"弹窗内容
    repairDialogClose() {
      this.$refs.repairFormRef.resetFields();
    },
    //===============================================================
    //清空“选择电话”弹窗内容
    repairDialog1Close() {
      this.$refs.repairForm1Ref.resetFields();
    },
    //"选择电话"当前选择值
    currentSelect1(val) {
      this.subPopTable1Select = val.tel;
    },
    //"选择电话"后“确认”按钮
    repairDialog1SureBtn() {
      this.repairDialog1 = false;
      this.repairForm.tel = this.subPopTable1Select;
    },
    //===============================================================
    //清空“选择维修事项”弹窗内容
    repairDialog2Close() {
      this.$refs.repairForm2Ref.resetFields();
    },
    //“选择维修事项”弹窗当前选择值
    currentSelect2(val) {
      this.subPopTable2Select = val.proName;
    },
    //“选择维修事项”弹窗确认按钮
    repairDialog2SureBtn() {
      this.repairDialog2 = false;
      this.repairForm.pro = this.subPopTable2Select;
    },
    //===============================================================
    //清空“选择故障位置”弹窗内容
    repairDialog3Close() {
      this.$refs.repairForm3Ref.resetFields();
    },
    //“选择故障位置”弹窗当前选择值
    currentSelect3(val) {
      this.subPopTable3Select = val.proName;
    },
    //“选择故障位置”弹窗确认按钮
    repairDialog3SureBtn() {
      this.repairDialog3 = false;
      this.repairForm.position = this.subPopTable3Select;
    },
    //===============================================================
    //清空“选择报修单位”弹窗内容
    repairDialog4Close() {
      this.$refs.repairForm4Ref.resetFields();
    },
    //"选择报修单位"当前选择值
    currentSelect4(val) {
      this.subPopTable4Select = val.place;
    },
    //"选择报修单位"后“确认”按钮
    repairDialog4SureBtn() {
      this.repairDialog4 = false;
      this.repairForm.bunit = this.subPopTable4Select;
    },
    //===============================================================
    //清空“选择报修人”弹窗内容
    repairDialog5Close() {
      this.$refs.repairForm5Ref.resetFields();
    },
    //"选择报修人"当前选择值
    currentSelect5(val) {
      this.subPopTable5Select = val;
    },
    //"选择报修人"后“确认”按钮
    repairDialog5SureBtn() {
      this.repairDialog5 = false;
      this.repairForm.tel = this.subPopTable5Select.e;
      this.repairForm.bunit = this.subPopTable5Select.d;
      this.repairForm.name = this.subPopTable5Select.b;
    },
    //===============================================================
    //清空“选择设备”弹窗内容
    repairDialog6Close() {
      this.$refs.repairForm6Ref.resetFields();
    },
    //"选择设备"当前选择值
    currentSelect6(val) {
      this.subPopTable6Select = val;
    },
    //"选择设备"后“确认”按钮
    repairDialog6SureBtn() {
      this.repairDialog6 = false;
      this.repairForm.type = this.subPopTable6Select.a;
      this.repairForm.no = this.subPopTable6Select.b;
      this.repairForm.dname = this.subPopTable6Select.c;
      this.repairForm.place = this.subPopTable6Select.d;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row {
  border: 1px solid RGBA(255, 255, 255, 1);
  padding: 3vh 0 0 0;
  position: relative;

  &:nth-child(2) {
    margin-top: 3vh;
  }

  &:nth-child(3) {
    margin-top: 3vh;
  }

  .row-title {
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: RGBA(255, 255, 255, 1);
    position: absolute;
    left: 1vw;
    top: -1.6vh;
  }

  .row-text {
    display: inline-block;
    width: 250px;
    color: red;
    position: absolute;
    margin-left: 2vw;
  }

  .row-1 {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw 0 0;
  }
}

// 表格内图片样式
/deep/ .el-form {
  img {
    position: absolute;
    margin-left: 0.2vw;
    margin-top: 0.5vh;
  }
}

/deep/ .el-dialog {
  --el-dialog-margin-top: 7vh;
}
</style>
